<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="余额"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <!-- 用户余额组件 -->
            <div class="user-account-info">
                <div class="account-name">账户余额（元）</div>
                <div class="account-info">{{accountMoney | currency}}</div>
                <router-link
                    tag="div"
                    to="/userCenter/userAccountDetail"
                    class="account-detail"
                >明细</router-link>
            </div>
            <!-- 用户余额组件 -->

            <!-- 用户余额操作组件 -->
            <div
                class="user-account-btn"
                @click="goWithdraw"
            >
                <span class="btn-name">提现</span>
                <img
                    class="btn-more"
                    src="../../assets/images/userCenter/more.png"
                />
            </div>
            <div
                class="user-account-btn"
                @click="goWithdrawRecord"
            >
                <span class="btn-name">提现记录</span>
                <img
                    class="btn-more"
                    src="../../assets/images/userCenter/more.png"
                />
            </div>
            <!-- 用户余额操作组件 -->

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'UserAccount',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0'
            },
            accountMoney: 0,
            userInfo: ''
        }
    },
    mounted() {
        this.getAccountInfo()
        this.getUserInfo()
    },
    methods: {
        getAccountInfo() {
            this.axios.post('/api/user/data.json').then(res => {
                const data = res.data
                if (data.status == 1) {
                    this.accountMoney = data.data.money
                } else {
                    this.commonDialog.alert('提示', data.msg)
                }
            })
        },
        getUserInfo() {
            this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        },
        goWithdraw() {
            let nowDay = new Date().getDay()
            if (nowDay != 2) {
                this.commonDialog.alert('提示', '提现功能仅在每周二开放')
                return
            }
            this.$router.push('/userCenter/withdrawCash')
        },
        goWithdrawRecord() {
            this.$router.push('/userCenter/withdrawRecord')
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.user-account-info
    position relative
    height 3.22rem
    background #d7463c
    .account-name
        position absolute
        top 0.92rem
        left 0.55rem
        font-size 0.38rem
        color #fff
    .account-info
        position absolute
        top 1.85rem
        left 0.55rem
        font-size 0.74rem
        color #fff
    .account-detail
        position absolute
        top 0.64rem
        right 0.55rem
        font-size 0.38rem
        color #fff
.user-account-btn
    display flex
    align-items center
    justify-content space-between
    height 1.11rem
    padding 0 0.37rem
    background #fff
    border-bottom 1px solid #e5e5e5
    .btn-name
        font-size 0.33rem
        color #666
    .btn-more
        width 0.2rem
        height 0.28rem
</style>

